<template>
  <div id="mainRaduis" style="width:500px;height: 600px;border-right:2px  solid #ccc;"></div>
</template>

<script>
  import * as echarts from 'echarts/core';
  import {
    TooltipComponent,
    LegendComponent
  } from 'echarts/components';
  import {
    PieChart
  } from 'echarts/charts';
  import {
    CanvasRenderer
  } from 'echarts/renderers';

  echarts.use(
    [TooltipComponent, LegendComponent, PieChart, CanvasRenderer]
  );

  export default {
    name: "PieBorderRadius",
    props: {
      pieData:{
        type: Array,
        default:[]
      },
      pieTitle:{
        type:String,
        default: ""
      }
    },
    data(){
      return {
        isLoad:false
      }
    },
    created(){
      var that = this;
      setTimeout(function(){
        that.init();
      },500);

    },methods:{
      init(){
        this.myChart = echarts.init(document.getElementById('mainRaduis'));
        this.isLoad = true;
        this.getData();
      },getData(){
        console.log(this.pieData)
        var option = {
          title:{
            text: this.pieTitle,
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: this.pieTitle,
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '40',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: this.pieData
            }
          ]
        };
        this.myChart.setOption(option);
      }

    }
  }
</script>

<style scoped>

</style>